import React, { useEffect, useRef } from 'react'

const MatrixRain = () => {
  const canvasRef = useRef(null)
  console.log(
    '%c🔮 你发现了秘密通道！',
    'font-size:24px; color:#ff69b4; text-shadow: 2px 2px #000'
  )
  console.log(
    '%c输入咒语 %c"芝麻开门()" %c获得力量',
    'color:#666',
    'color:#0f0; font-weight:bold',
    'color:#666'
  )
  console.debug(
    '%c⚡ 警告：前方高能反应！',
    'background:#000; color:#ff0; padding:5px;'
  )
  useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    const chars = 'js'
    const columns = Math.floor(canvas.width / 20) // 列数
    const drops = Array(columns).fill(0) // 每列的起始位置
    const speeds = Array(columns)
      .fill(0)
      .map(() => Math.random() * 10 + 5) // 每列的下落速度

    const draw = () => {
      // 设置背景颜色并覆盖整个画布，制造渐隐效果
      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      // 设置字符颜色
      ctx.fillStyle = '#0F0' // 绿色
      ctx.font = '20px monospace' // 设置字体

      // 遍历每一列
      drops.forEach((drop, i) => {
        // 随机选择一个字符
        const char = chars[Math.random() > 0.5 ? 0 : 1]
        // 绘制字符
        ctx.fillText(char, i * 20, drop)
        // 更新下落位置
        drops[i] += speeds[i]
        // 如果超出画布高度，重置位置
        if (drops[i] > canvas.height) {
          drops[i] = 0
          speeds[i] = Math.random() * 10 + 15 // 重置速度
        }
      })
    }

    const interval = setInterval(draw, 100)

    return () => clearInterval(interval)
  }, [])
  // useEffect(() => {
  //   const canvas = canvasRef.current
  //   const ctx = canvas.getContext('2d')
  //   canvas.width = window.innerWidth
  //   canvas.height = window.innerHeight
  //   const chars = '01'
  //   const drops = Array(Math.floor(canvas.width / 20)).fill(0)

  //   const draw = () => {
  //     ctx.fillStyle = 'rgba(0,0,0,0.05)'
  //     ctx.fillRect(0, 0, canvas.width, canvas.height)
  //     ctx.fillStyle = '#0F0'
  //     drops.forEach((drop, i) => {
  //       ctx.fillText(chars[Math.random() > 0.5 ? 0 : 1], i * 20, drop)
  //       drops[i] = drop > canvas.height ? 0 : drop + 20
  //     })
  //   }

  //   const interval = setInterval(draw, 100)

  //   return () => clearInterval(interval)
  // }, [])

  return (
    <canvas ref={canvasRef} style={{ position: 'fixed', top: 0, left: 0 }} />
  )
}

export default MatrixRain
